<template>
	<tm-app color="#efefef">		
	<view class="flex flex-between pl-30 FormM1">
		<navbar-module title="待喂食工单" :transprent="true"/>
	</view> 
	<tm-sheet :padding="[2,2]" style="margin-top:-200rpx;overflow-y: auto;max-height: 1100rpx;">
		<view v-if="!showWin">
			<tm-cell bottomBorder :margin="[0,0]" title="工单编号" :titleFontSize="32">
				<template v-slot:right>
					<tm-text :fontSize="32">{{itemData.data.code}}</tm-text>
				</template>
			</tm-cell>
			<tm-cell bottomBorder :margin="[0,0]" title="主食" :titleFontSize="32">
				<template v-slot:right>
					<tm-text :fontSize="32">{{itemData.data.content?.combo.name}}</tm-text>
				</template>
			</tm-cell>
			<tm-cell v-if="itemData.data.content?.affix?.length>0" bottomBorder :margin="[0,0]" title="零食:" :titleFontSize="36">
				<template v-slot:right></template>
			</tm-cell>
			<tm-cell v-for="(item,index) in itemData.data.content?.affix" :key="index" bottomBorder :margin="[0,0]" :title="item.name" :titleFontSize="32">
				<template v-slot:right>x{{item.amount}}</template>
			</tm-cell>
			<tm-cell bottomBorder :margin="[0,0]" title="所属猪圈" :titleFontSize="32">
				<template v-slot:right>
					<tm-text :fontSize="32">{{itemData.data.pigsty?.name}}</tm-text>
				</template>
			</tm-cell>
			<tm-cell bottomBorder :margin="[0,0]" title="猪仔数量" :titleFontSize="32">
				<template v-slot:right>
					<tm-text :fontSize="32">{{itemData.data.pigDetail?.length}} 头</tm-text>
				</template>
			</tm-cell>
			<tm-cell bottomBorder :margin="[0,0]" title="猪仔详情:" :titleFontSize="32">
				<template v-slot:right></template>
			</tm-cell>
			<view style="overflow-y: auto;max-height:300rpx">
				<view v-for="(pigItem,i) in itemData.data.pigDetail" :key="i" class="flex border-b-1">
					<tm-text :fontSize="32" _class="mx-20 my-10">	
					<text style="color:#fbb925;">{{pigItem?.name}}:  </text> {{pigItem?.pigLevel?.breed?.name}}，
					成长{{pigItem?.pigLevel?.day}}天，体重{{pigItem?.pigLevel?.weight}}KG</tm-text>
				</view>
			</view>
			<tm-cell bottomBorder :margin="[0,0]" title="创建时间" :titleFontSize="32">
				<template v-slot:right>
					<tm-text :fontSize="32">{{itemData.data.createTime}}</tm-text>
				</template>
			</tm-cell>
		</view>
		<view v-else class="flex flex-center flex-col pa-20">
			<!-- <video id="myVideo" src="https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/2minute-demo.mp4" style="width: 640rpx;height:350rpx"></video> -->
			
			<ezplayer  v-show="!clzTipShow && !wcTipShow"
			    id="ezplayer"
			    :accessToken="cameraUrl[0].accessToken"
			    :url="cameraUrl[0].url"
			    plugins=""
			    recPlayTime=""
			    width="320"
			    height="175"
			/>
			<tm-text label="若播放不起,请检查摄像头是否已开启" color="orange"></tm-text>
			<view style="width: 320px;height:175px;background-color: white" v-show="clzTipShow || wcTipShow"></view>
			
			<view v-if="!modalBtnFlag" class="flex flex-center mt-30">
				<tm-button width="400" color="#23C343" :round="10" label="开始喂食" :fontSize="34" @click="modalBtnclick"></tm-button>
			</view>
			<view v-else class="flex flex-between fulled mt-30">
				<tm-button :round="10" label="重新录制" :fontSize="34" color="#ff9a2e" outlined @click="clzTipShow = true"></tm-button>
				<tm-button :round="10" label="完成喂食" :fontSize="34" color="#23C343" @click="wcTipShow = true"></tm-button>
				
			</view>
		</view>
	</tm-sheet>
	
	<view style="position: absolute;bottom:0; width: 750rpx;">
		<tm-button v-if="btnFlag" _class="btn-style" block size="large" :height="90" :shadow="0" :label="btnlabel" @click="btnclick" :fontSize="34"/>
	</view>
	
	<tm-modal ref="modal2" :overlayClick="false" splitBtn v-model:show="clzTipShow">
		<tm-text label="是否完成喂食,该功能只在喂食工作进行之前使用" :fontSize="36" class="flex flex-center"></tm-text>
		<template v-slot:button>
			<view class="fulled flex flex-between">
				<tm-button outlined label="取消" :round="10" color="#ff9a2e" @click="clzTipShow = false"></tm-button>
				<tm-button label="确定" :round="10" color="#ff9a2e" @click="againRecord"/>
			</view>
		</template>
	</tm-modal>
	
	<tm-modal ref="modal3" :overlayClick="false" splitBtn v-model:show="wcTipShow">
		<tm-text label="喂食已完成,确认提交" :fontSize="36" class="flex flex-center"></tm-text>
		<template v-slot:button>
			<view class="fulled flex flex-between">
				<tm-button outlined label="取消" :round="10" color="#23C343" @click="wcTipShow = false"></tm-button>
				<tm-button label="确定" :round="10" color="#23C343" @click="btnclick"/>
			</view>
		</template>
	</tm-modal>
	
	<tm-message ref="msg" :lines="2"/>
	<tm-notification placement="top" ref="notif" :offset="[32,90]"/>
	</tm-app>
</template>

<script setup lang='ts'>
import { reactive,ref ,nextTick} from "vue";
import { onLoad } from '@dcloudio/uni-app'
import {referFeed,startVideo,stop} from '../../index/resource/http'
import tmMessage from '@/tmui/components/tm-message/tm-message.vue'
import tmNotification from '@/tmui/components/tm-notification/tm-notification.vue'

const msg = ref<InstanceType<typeof tmMessage> | null>(null)
const notif = ref<InstanceType<typeof tmNotification> | null>(null)

	const itemData = reactive({data:null})
	const showWin = ref(false)
	const modal = ref(null)
	const cameraUrl = ref([])
	
	onLoad((option) => {
		itemData.data = JSON.parse(decodeURIComponent(option.data))
		itemData.data.cameraUrl.forEach(item => {
			const val = JSON.parse(item)
			// val.url.replace(/\\(?=[^\\]*$)/ ,"$1")
			
			// split方法
			const arr = val.url.split('/')
			// console.log(arr,'拆分的url');
			const numArr = arr[4].split('.')
			// console.log(numArr,'截取的通道');
			arr[4] = numArr[0]
			arr[5] = numArr[2]
			const url = arr.join('/')
			// console.log(url,'组装的url');
			val.url = url
			
			
			
			cameraUrl.value.push(val)
		})
		console.log(itemData,'123332211');
	})
	
	const btnlabel = ref('开始喂食')
	const btnFlag = ref(true)
	const modalBtnFlag = ref(false)
	
	const clzTipShow = ref(false)
	const wcTipShow = ref(false)
	
	const beginTime = ref('')
	const outTime = ref('')
	
	const btnclick = async () => {
		if(btnFlag.value){
			// 开启录像
			btnlabel.value = '确定完成'
			btnFlag.value = false
			showWin.value = true			
		}else{
			// 提交任务
			// console.log('执行了提交我和四');
			const res2 = await stop(itemData.data.code)
			const res = await referFeed({id:itemData.data.id})
			if(res.code == '0' && res2.code == '0'){
				msg.value.show({ model: 'success' })
				setTimeout(()=>{
					wx.disableAlertBeforeUnload()
					uni.navigateBack()
					// console.log('执行了返回');
				},1300)
			}else{
				let message = null
				if(res.code == '0'){
					message = res2.message
				}else{
					message = res.message
				}
				nextTick(() => {
						notif.value?.show({ label: message,color:'#FF837F' })
					})
			}
		}
	}
	
	
	const modalBtnclick = async () => {
		// 调接口开始录制
		const res = await startVideo(itemData.data.code)
		if(res.code == 0){
			modalBtnFlag.value = true
			uni.showToast({
			    title: "已开始录制",
			    icon: "success",
			    duration: 1000
			  });
		}
			
		// 监听返回事件
		wx.enableAlertBeforeUnload({
		     message: "录像已开启，确认退出吗？",
		     success: function (res) {
		       console.log("成功：", res);
		     },
		     fail: function (err) {
		       console.log("失败：", err);
		     },
		   });
	}
	
	
	//重新录制
	const againRecord = async () => {
		// 调接口开始录制
		const res = await startVideo(itemData.data.code)
		
		if(res.code == 0){
			clzTipShow.value = false
			  uni.showToast({
			    title: "已开始录制",
			    icon: "success",
			    duration: 1000
			  });
		}
	}
	
	

</script>

<style>

</style>
